<template>
	<view class="content">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{$t('repair').applyRepair}}</text></block>
		</cu-custom>
		<view class="padding">
			<text>{{$t('repair').youInputApply}}</text>
		</view>
		<form id="formEmplotee" @submit="formSubmit">
			<view class="cu-form-group">
				<view class="title">{{$t('repair').repairTime}}</view>
				<view class="action">
					<view style="display: flex;justify-content: center;align-items: center;">
						<text>{{repair.date}}</text>
						<input placeholder="09:00" style="width: 120upx;margin-left: 20upx;" v-model="time"></input>
					</view>
		
				<!-- 	<picker mode="time" :value="time" @change="bindDateChange">
						
					</picker> -->
				</view>
			</view>
			<view style="height: 20upx;"></view>
			<view class="cu-form-group align-start">
				<view class="response">
					<view class="title">{{$t('repair').repairTime}}</view>
					<textarea name="leavereason" maxlength="-1" :placeholder="$t('repair').repairReasonHint"></textarea>
				</view>
			</view>
			<!-- 			<view class="cu-bar bg-white margin-top">
				<view class="action">
					图片(选填)
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view> -->
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					{{$t('leave').approval}}
				</view>
				<view style="padding-right: 30upx;">
					<!-- <text class="cuIcon-settingsfill text-blue">流程设置</text> -->
				</view>
			</view>

			<approval :title="$t('leave').appPerson" :subtitle="appData.length>0?appData.length+$t('leave').perApproval:$t('leave').appPersonHint"
			 :options="appData" @addEvent="addEvent" @delete="delApproval"></approval>
			<!-- <view style="height: 180upx;"></view> -->
			<view class="bottom-float margin-top">
				<button class="response" :disabled="loadding" style="background-color: #5599FF;" :loading="loadding" type="primary"
				 form-type="submit">{{$t('submit')}}</button>
			</view>
		</form>
		<!-- <TimeSelect>1111</TimeSelect> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/image-tools/index.js'
	import selectDate from '@/components/selectdate/selectdate.vue'
	import Approval from '@/components/approval/approval.vue'
	// import TimeSelect from '@/components/timeselect.vue'
	export default {
		components: {
			Approval,
			selectDate,
			// TimeSelect
		},
		data() {
			return {
				imgList: [],
				timetype: 'day',
				vminimum: 1,
				// end
				loadding: false,
				appData: [], //审批人
				repair: {},
				time: '09:00'
			}
		},
		onLoad(options) {
			this.$constant.checkUserInfo()
			if (typeof(options.repair) != 'undefined') {
				let repair = JSON.parse(options.repair)
				this.repair = repair
				this.time = repair.stime
			} else {
				// uni.showModal({
				// 	title: this.$t('notice'),
				// 	content:this.$t('parameterError'),
				// 	showCancel: false,
				// 	success() {
				// 		uni.navigateBack({
				// 			delta: 1
				// 		})
				// 	}
				// })
			}
		},
		methods: {
			// btnConfirm(e){
			// 	console.log(e)
			// 	let time = e.key
			// 	this.time = time
			// },
			ChooseImage() {
				let that = this
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res.tempFilePaths)
						res.tempFilePaths.forEach(function(item) {
							pathToBase64(item)
								.then(base64 => {
									if (that.imgList.length < 4) {
										that.imgList.push(base64)
									}

								})
						})
						// console.log(that.imgList)
					}
				});
			},
			bindDateChange: function(e) {
				let time = e.target.value
				this.time = time
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: this.$t('notice'),
					content: this.$t('leave').deleteImgTips,
					cancelText: this.$t('notice').deleteActionSure,
					confirmText: this.$t('notice').deleteActionCancel,
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			SelectChange(e) {
				if (!e.show) {
					this.opendate = false
				}
			},
			addEvent() {
				uni.navigateTo({
					url: '../contacts/contacts-2'
				})
			},
			delApproval(e) {
				this.appData.splice(e.index, 1)
			},
			formSubmit(e) {
				console.log(e)
				let value = e.detail.value
				
				if(this.time!=''){
					let times = this.time.split(':')
					let hour = times[0]
					let minute = times[1]
					if(hour<0||hour>23||minute<0||minute>59||hour.length>2||minute.length>2||hour==''||minute==''){
						uni.showToast({
							title: this.$t('repair').timeError1,
							icon: 'none'
						})
						return
					}
					console.log(hour)
					console.log(minute)
				}else{
					uni.showToast({
						title: this.$t('repair').timeError1,
						icon: 'none'
					})
					return
				}
				
				if (value.leavereason == '') {
					uni.showToast({
						title: this.$t('repair').repairReasonHint,
						icon: 'none'
					})
					return
				}

				if (this.imgList.length > 4) {
					uni.showToast({
						title: this.$t('leave').moreImage,
						icon: 'none'
					})
					return
				}

				if (this.appData.length <= 0) {
					uni.showToast({
						title: this.$t('leave').appPersonHint,
						icon: 'none'
					})
					return
				}
				let approval = ''
				for (let i = this.appData.length - 1; i >= 0; i--) {
					approval += this.appData[i].id + ','
				}
				let submitdata = {
					ptype: this.repair.ptype,
					fid: this.repair.perid,
					fname: this.repair.personname,
					ptime: this.repair.date + ' ' + this.time + ':00',
					sysCompanyCode: getApp().globalData.unitno,
					preason: value.leavereason,
					approval: approval,
					// leaveimg: JSON.stringify(this.imgList)
				}
				console.log(submitdata)
				// return
				this.loadding = true
				//开始提交
				uni.request({
					url: this.$constant.BASEURL + this.$constant.ADD_PARCH_APPLY,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: submitdata,
					complete: (res) => {
						this.loadding = false
						console.log(res.data)
						if (res.data.code == 0 && res.data.data != '') {
							uni.redirectTo({
								url: `repair-detail?leaveid=${res.data.data}`
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});

			}

		}
	}
</script>

<style>
	/* 	.img {
		background: url(../../../static/icon_increase_blue.png);
	} */

	.bottom-float {
		padding: 25upx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100%;
		/* position: fixed; */
		/* display: flex; */
		/* justify-content: center; */
	}

	.approval-group {
		direction: rtl;
		unicode-bidi: bidi-override;
		padding: 0 10upx 0 40upx;
		display: inline-block;
	}

	.approval-group .cu-avatar {
		/* margin-left: -30upx; */
		border: 4upx solid #f1f1f1;
		vertical-align: middle;
	}

	.approval-group .cu-avatar.sm {
		margin-left: -20upx;
		border: 1upx solid #f1f1f1;
	}
</style>
